<template>
  <div>
    <div class="b-title">智能设备在线情况</div>
    <div>
      <div
        v-for="(item, index) in deviceOnline"
        :key="index"
        class="deviceOnline relative text-center"
      >
        <el-image
          :src="item.picUrl"
          fit="fill"
          style="height: 100%"
          :preview-src-list="deviceOnline.map(item => item.picUrl)"
        />
        <div class="tip font-24">{{ item.onlineCount }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
// 在线图片
import menjing from "@/assets/board/menjing.png";
import zhongduan from "@/assets/board/zhongduan.png";
import huojia from "@/assets/board/huojia.png";
import tongdaoji from "@/assets/board/tongdaoji.png";

const props = defineProps({
  data: {
    default: () => ({}) as any
  }
});

/* 智能设备在线情况 */
const deviceOnline = computed(() => {
  const list = props.data?.facilityUseStatList ?? [];
  return list.map(item => {
    // 设施类型(1货架 2门禁 3借还终端)
    let picUrl = "";
    switch (String(item.type ?? "")) {
      case "1":
        picUrl = huojia;
        break;
      case "2":
        picUrl = menjing;
        break;
      case "3":
        picUrl = zhongduan;
        break;
      case "4":
        picUrl = tongdaoji;
        break;
    }
    return { ...item, picUrl };
  });
});
</script>

<style lang="scss" scoped>
.deviceOnline {
  width: 6vw;
  height: 7vh;
  padding: 0.5vh 1vw;
  background: rgb(31, 42, 116);
  margin: 0.5vh 0.5vw;
  display: inline-block;
  .tip {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(65, 124, 255, 0.5);
    width: 40%;
    border-top-left-radius: 0.5vw;
    text-align: center;
    font-weight: bold;
  }
}
</style>
